/**
* @file 商品详情
* @author 张超
* @created 2023/7/04 08:00
* @updated 2023/7/27 18:00
*/
<template>
	<view class="product-detail">
		<u-navbar :border-bottom="false" title-size="35" title="商品详情"></u-navbar>
		<div class="full">
			<z-swiper :autoplay='autoplay' :list='list' :effect3d='effect3d' :fullScreen='fullScreen'
				:effect3dMargin='`${effect3dMargin}rpx`' :vertical='vertical' :topFloat='topFloat'
				:fotterFloat='fotterFloat' :mode='mode' :indicatorPos='indicatorPos'></z-swiper>
		</div>
		<view class="detail-cont">
			<view class="cont-des2">
				<view>
					<text style="font-size: 36rpx;">优惠价:</text>
					<text style="margin-left:5rpx;">{{hotList.goodsprice}}</text>
					<text>金币+</text>
					<text>{{hotList.goodssalenum}}</text>
					<text>积分</text>
				</view>
				<text>{{hotList.goodsname}}</text>
			</view>
			<view class="cont-des3">
				<view class="">
					<text>销量</text>
					<text>{{hotList.salenum}}</text>
				</view>
				<view class="">
					<text>零售价</text>
					<text>{{hotList.retailprice}}</text>
				</view>
				<view class="" @click="giug">
					<text>规格</text>
					<text>选择</text>
					<u-icon name="arrow-right" color="#7a7a7a"></u-icon>
				</view>
				<view class="">
					<text>运费</text>
					<text>免运费</text>
				</view>
				<view class="">
					<text>参数</text>
					<text>{{hotList.parameters}}</text>
				</view>
			
			</view>
			<view class="comment-section">
			  <view class="comment-header">
			    <text class="title">商品评价</text>
			    <view class="view-all" @click="goToCommentList">
			      <text>查看全部</text>
			      <u-icon name="arrow-right" color="#999" size="24"></u-icon>
			    </view>
			  </view>
			  
			  <view class="comment-empty">
			    <text>暂无评价</text>
			    <text class="hint">还没有人评价过该商品</text>
			  </view>
			  
			  <view class="comment-stats">
			    <view class="stat-item">
			      <text class="value">0</text>
			      <text class="label">评价总数</text>
			    </view>
			    <view class="stat-item">
			      <text class="value">0%</text>
			      <text class="label">好评率</text>
			    </view>
			  </view>
			</view>
		</view>
		<view class="cont-poster">
			<u-parse :html="hotList.goodscontent_text" style="font-size: 0;"></u-parse>
		</view>
		<view class="cont-shangp">
			<view class="shangp-title">
				<image src="@/static/shop/shangp1.png"></image>
				<text>精选商品</text>
				<image src="@/static/shop/shangp2.png"></image>
			</view>
			<ul>
				<li v-for="(item,index) in jinxList" :key="index" @click="goProduct(item.id)">
					<image :src="item.goodsimage_text"></image>
					<view>{{item.goodsname}}</view>
					<view>
						<text>{{item.goodsprice|xiaos}}</text>
						<text>金币+</text>
						<text>{{item.goodssalenum|xiaos}}</text>
						<text>积分</text>
					</view>
				</li>
			</ul>
		</view>
		<view style="height:200rpx;"></view>
		<!-- 即将开抢 -->
		<view class="promptly" @click="goConfig">
			<view>立即购买</view>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="pop">
				<view class="pop-info">
					<image :src="hotList.goodsimage_text"></image>
					<view>
						<view class="">
							<text>{{market.market_price}}</text>
							<text>金币+</text>
							<text>{{market.market_score}}</text>
							<text>积分</text>
						</view>
						<view>库存{{market.stock}}件</view>
					</view>
					<u-icon name="close" size="40" @click="giug"></u-icon>
				</view>
				<!-- 规格 -->
				<view class="pop-body">
					<view class="select" v-for="(item,index) in list2" :key="index">
						<view class="left2">
							{{item.name}}:
						</view>
						<view class="right2">
							<view class="right2-items" v-for="(item2,index2) in item.values" :key="index2"
								@click="changeSelect(index,index2,item2,item.values,item)"
								:class="[sel[index] == index2?'active':'']">
								{{item2}}
							</view>
						</view>
					</view>
				</view>
				<view class="pop-number">
					<text>购买数量</text>
					<u-number-box v-model="value" :step="1" @change="valChange"></u-number-box>
				</view>
				<view class="pop-config" @click="config">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goods_detail,
		goods_list,
		goods_price
	} from '@/network/api.js'
	import zSwiper from '@/components/z-swiper/index.vue'
	export default {
		components: {
			zSwiper
		},
		data() {
			return {
				effect3d: false,
				autoplay: false,
				vertical: false,
				fullScreen: true,
				effect3dMargin: 40,
				topFloat: true,
				fotterFloat: true,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				list: [],
				dotIndex: 0, //指示器索引
				dotFloatIndex: 0, //位置指示器索引
				ids: '',
				// 是否弹框
				show: false,
				// 选择规格
				current: 0,
				//当前详情页id
				goodsId: '',
				// 数量
				value: 1,
				// 宣传图
				content: ``,
				// 详情页数据
				hotList: {},
				// 精选商品
				jinxList: [],
				// 重量列表
				List: {},
				//重量选择重构数据
				list2: [],
				// 选中的数据集合
				arr2: [],
				arr3: [],
				//动态classs
				sel: [0, 0],
				// 商品报价
				market: {},
				video: {
					type: 'video',
					currentTime: 120, //初始帧时间---默认缓存存储
					poster: '',
					src: '',
				}
			}
		},
		onLoad(option) {
			this.ids = option.id
			this.in()
			this.jinx()
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		methods: {
			// 跳转到评论列表
			  goToCommentList() {
			    uni.navigateTo({
			      url: `/pages/subpackage/shop/commentList`
			    })
			  },
			effect3dMarginMethed() {
				this.effect3dMargin++
			},
			setTip(type) {
				for (let item of this.list) {
					if (type) {
						item.topTip = '顶部提示语' + Math.random()
					} else {
						item.bottomTip = '底部部提示语' + Math.random()
					}
				}
			},
			switchDot() { //指示器样式切换
				let arr = ['round', 'circle', 'default', 'index', 'number', 'none']
				if (this.dotIndex < arr.length - 1) {
					this.dotIndex++
				} else {
					this.dotIndex = 0
				}
				this.mode = arr[this.dotIndex]
			},
			switchDotFLoat() { //指示器位置切换
				if (this.vertical) {
					return uni.showToast({
						title: '垂直暂支持右侧',
						icon: 'none'
					})
				}
				let arr = 'bottomCenter/topLeft/topCenter/topRight/bottomLeft/bottomRight'.split('/')
				if (this.dotFloatIndex < arr.length - 1) {
					this.dotFloatIndex++
				} else {
					this.dotFloatIndex = 0
				}
				this.indicatorPos = arr[this.dotFloatIndex]
			},
			swefdas() {
				console.log('触发')
			},
			// 获取精选商品
			jinx() {
				let data = {
					object: 'like',
					limit: 6
				}
				goods_list(data).then(res => {
					this.jinxList = res.data
				})
			},
			// 获取商品详情数据
			in() {
				let data = {
					id: this.ids
				}
				goods_detail(data).then(res => {
					this.hotList = res.data
					let data11 = res.data.goodsimages_text.map(v => {
						return {
							type: 'image',
							src: v
						}
					})
					if(res.data.video_text!=''){
						this.video.src = res.data.video_text
						this.video.poster=res.data.vimage_text
						data11.unshift(this.video)
					}
					this.list = data11
					console.log(this.list, '轮播图数据')
					this.goodsId = res.data.id
					this.List = res.data.specs
					// 设置默认选中规格
					// 处理数据
					let arr = []
					for (let i in this.List) {
						this.arr2.push(this.List[i][0])
						this.arr3.push(this.List[i][0])
						this.sel[i] = 0
						arr.push({
							name: i,
							values: this.List[i].filter(item => {
								return {
									value: item
								}
							})
						})
					}
					this.list2 = arr
					this.request123()
				})
			},
			// 弹框
			giug() {
				this.show = !this.show
			},
			// 规格切换
			guigeEv(index) {
				this.current = index
			},
			// 商品数量
			valChange(e) {
				this.value = e.value
				this.request123()
			},
			// 确定
			config() {
				this.show = false
				let data = {
					type: 1,
					number: this.value,
					market: this.market
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/config?data=' + JSON.stringify(data)
				})
			},
			// 跳转确定订单页
			goConfig() {
				this.show = true
			},
			// 跳转商品详情页
			goProduct(id) {
				uni.navigateTo({
					url: '/pages/subpackage/shop/productDetail?id=' + id
				})
			},
			// 商品报价
			changeSelect(index, index2, item2, item, items) {
				console.log('a:' + index, 'b:' + index2, 'c:' + item2, 'd:' + item, items + 'e', 'sss')
				this.sel[index] = index2;
				this.$set(this.sel, index, index2)

				// 由于数据初始化的时候,arr2里面保留的就item,要把就旧item删除,把新的item添加进去
				item.forEach((i, index) => {
					if (this.arr2.indexOf(i) != -1) {
						this.arr2.splice(this.arr2.indexOf(i), 1)
					}
				})
				this.arr2.push(item2)

				let arr3 = []
				this.list2.forEach(i => {
					i.values.forEach(j => {
						if (this.arr2.indexOf(j) != -1) {
							arr3.push(j)
						}
					})
				})
				this.arr3 = arr3
				console.log(this.arr3, 'arr3')
				this.request123()
			},
			request123() {
				let str = this.arr3.join(',')
				console.log(str, '报价参数')
				let data = {
					name: str,
					number: this.value,
					good_id: this.goodsId
				}
				goods_price(data).then(res => {
					this.market = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	// 处理富文本间隔问题
	.u-parse .p {
		padding: 0 !important;
	}

	.u-parse view {
		line-height: 0 !important;
	}

	.uni-countdown {
		opacity: 0.6;
	}

	.active {
		color: #B27716 !important;
		background-color: #fcf1d7 !important;
	}

	.select {
		margin-top: 20rpx;
	}

	.full {
		position: relative;

		.btns {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			z-index: 99999;
			left: 100rpx;
			top: 50rpx;
			right: 100rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			>view {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				padding: 0 20rpx;
			}

			&.full {
				position: relative;
				left: 0;
				right: 0;

				>view {
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 0 20rpx;
					background-color: rgba(0, 0, 0, 0.1);
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.imgs {
		width: 750rpx;
		height: 750rpx;

		.swiper {
			width: 750rpx;
			height: 750rpx;

			.swiperItem {
				width: 750rpx;
				height: 750rpx;

				.videoI {
					width: 750rpx;
					height: 750rpx;
				}

				.imgI {
					width: 750rpx;
					height: 750rpx;
				}
			}
		}
	}

	.product-detail {
		background-color: #f7f7f7;

		.detail-img {
			width: 100%;
			height: 650rpx;
		}

		.detail-cont {
			margin-top: -20rpx;

			.cont-des2 {
				height: 168rpx;
				padding: 30rpx;
				background-color: #fff;

				>view:nth-child(1) {
					color: #E80000;

					>text:nth-child(even) {
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: bold;
					}

					>text:nth-child(odd) {
						font-size: 20rpx;
					}
				}

				>text:nth-child(2) {
					display: block;
					margin-top: 10rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.cont-des3 {
				margin: 20rpx 0;

				>view {
					height: 108rpx;
					line-height: 108rpx;
					padding: 0rpx 30rpx;
					background: #ffffff;
					box-sizing: border-box;
					border-bottom: 1rpx solid #EEEEEE;

					>text:nth-child(1) {
						margin-right: 40rpx;
					}

					>text:nth-child(2) {
						color: #666666
					}
				}

				>view:nth-child(1) {
					display: flex;

					.u-icon--right {
						margin-left: auto;
					}
				}
				>view:nth-child(2) {
					display: flex;
				
					.u-icon--right {
						margin-left: auto;
					}
				}

				>view:nth-child(4) {
					border: none
				}
			}
		}

		// 精选商品
		.cont-shangp {
			margin-top: 40rpx;
			padding: 40rpx 30rpx;

			.shangp-title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;

				>image {
					width: 104rpx;
					height: 5rpx;
				}

				>text {
					margin: 0 20rpx;
				}
			}

			>ul {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				>li {
					width: 31%;
					height: 320rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					box-sizing: border-box;
					background-color: #fff;

					>image {
						width: 100%;
						height: 220rpx;
					}

					>view:nth-child(2) {
						text-align: center;
						padding: 0 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					>view:nth-child(3) {
						text-align: center;
						padding: 0 10rpx;
						color: #E80000;

						>text:nth-child(odd) {
							font-size: 25rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: bold;
						}

						>text:nth-child(even) {
							font-family: PingFang SC, PingFang SC-Medium;
							font-size: 15rpx;
						}
					}
				}

				// >li:nth-child(3n) {
				// 	margin-right: 0
				// }

				// /* 如果最后一行是3个元素 */
				>li:last-child:nth-child(3n - 1) {
					margin-right: calc(33% + 4% / 3);
				}

				/* 如果最后一行是2个元素 */
				>li:last-child:nth-child(3n - 2) {
					margin-right: calc(64% + 8% / 3);
				}
			}
		}

		//即将开抢
		.promptly {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 140rpx;
			text-align: center;
			margin-top: 40rpx;
			padding: 30rpx 22rpx;
			background-color: #fff;

			>view {
				display: block;
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				border-radius: 10rpx;
				background-color: #F4A034;
			}

			>view:active {
				background-color: #e9cba9;
			}
		}

		// 弹框
		.pop {
			height: 750rpx;
			padding: 60rpx 30rpx 40rpx 30rpx;

			.pop-info {
				display: flex;
				align-items: center;
				text-align: center;

				>image {
					width: 190rpx;
					height: 190rpx;
					margin-right: 40rpx;
				}

				>view:nth-child(2) {
					color: #E80000;
					text-align: start;
					margin-top: auto;

					>view:nth-child(1) {
						>text:nth-child(odd) {
							font-size: 36rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: bold;
						}

						>text:nth-child(even) {
							font-family: PingFang SC, PingFang SC-Medium;
							font-size: 25rpx;
						}
					}

					>view:nth-child(2) {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						color: #999999;
					}

				}

				.u-icon {
					margin-left: auto;
					margin-bottom: auto;
				}
			}

			// 规格
			.pop-body {
				padding: 10rpx 20rpx;
				margin: 0rpx -20rpx;

				.right2 {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;
					// justify-content: space-between;

					.right2-items {
						// display: inline-block;
						// width: 100%;
						height: 40rpx;
						margin-top: 20rpx;
						line-height: 40rpx;
						text-align: center;
						padding:0 20rpx;
						opacity: 0.65;
						background: #f5f5f5;
					}

					/* 如果最后一行是3个元素 */
					.right2-items:last-child:nth-child(4n - 1) {
						margin-right: calc(24% + 4% / 3);
					}

					/* 如果最后一行是2个元素 */
					.right2-items:last-child:nth-child(4n - 2) {
						margin-right: calc(48% + 8% / 3);
					}
				}


			}

			// 数量
			.pop-number {
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0 50rpx 0;

				>text:nth-child(1) {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
				}
			}

			// 确定
			.pop-config {
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				bottom: 20rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				background: linear-gradient(to right, #B07412, #E3BA5B);
				border-radius: 4px;
			}

			.pop-config:active {
				background: linear-gradient(to right, #E3BA5B, #E3BA5B);
			}
		}
	}
	// 在现有样式后添加
	.comment-section {
	  background-color: #fff;
	  padding: 30rpx;
	  margin-top: 20rpx;
	  
	  .comment-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 30rpx;
	    
	    .title {
	      font-size: 32rpx;
	      font-weight: bold;
	      color: #333;
	    }
	    
	    .view-all {
	      display: flex;
	      align-items: center;
	      font-size: 26rpx;
	      color: #999;
	      
	      text {
	        margin-right: 10rpx;
	      }
	    }
	  }
	  
	  .comment-empty {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding: 40rpx 0;

	    
	    text {
	      font-size: 28rpx;
	      color: #666;
	    }
	    
	    .hint {
	      font-size: 24rpx;
	      color: #999;
	      margin-top: 10rpx;
	    }
	  }
	  
	  .comment-stats {
	    display: flex;
	    justify-content: space-around;
	    margin-top: 30rpx;
	    padding-top: 30rpx;
	    border-top: 1rpx solid #eee;
	    
	    .stat-item {
	      display: flex;
	      flex-direction: column;
	      align-items: center;
	      
	      .value {
	        font-size: 36rpx;
	        font-weight: bold;
	        color: #333;
	        margin-bottom: 10rpx;
	      }
	      
	      .label {
	        font-size: 26rpx;
	        color: #666;
	      }
	    }
	  }
	}
</style>